<template>
	<el-row class="clear-margin">
		<el-form-item :label="info.label">
			<el-col :span="11">
				<el-form-item>
					<el-date-picker type="date" v-model="startDate" value-format="yyyy-MM-dd" size="small" style="100%" placeholder="开始日期"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col class="line" :span="2">-</el-col>
			<el-col :span="11">
				<el-form-item>
					<el-date-picker type="date" v-model="endDate" value-format="yyyy-MM-dd" size="small" style="100%" placeholder="结束日期"></el-date-picker>
				</el-form-item>
			</el-col>
		</el-form-item>
	</el-row>
</template>

<script>
	export default {
		props: ['toolInfo', 'reset'],
		data(){
			return {
				info: this.toolInfo,
				startDate: '',
				endDate: ''
			}
		},
		method: {

		},
		watch: {
			// 监听父组件的toolInfo变量
			'toolInfo': function(value){
				this.info = value;
			},
			// 监听父组件的reset状态
			'reset': function(){
				this.startDate = '';
				this.endDate = '';
			},
			// 向父组件传输startDate数据
			'startDate': function(value){
				this.$emit('message', this.info.fieldName+'_start', 'date', value);
			},
			// 向父组件传输endDate数据
			'endDate': function(value){
				this.$emit('message', this.info.fieldName+'_end', 'date', value);
			}
		}
	}
</script>

<style>
	.clear-margin{
		margin-bottom: 0px;
	}
</style>